<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Ionic App - Simple</title>
    <base href="./"/>
    <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    
    <link href="./ionic/css/chunk-ionic.f5c8e0e3.css" rel="stylesheet">
    <link href="./ionic/css/app.7b141fc5.css" rel="stylesheet">
    
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        .debug-info {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 12px;
            z-index: 9999;
            max-width: 200px;
        }
        
        .simple-app {
            padding: 20px;
            text-align: center;
        }
        
        .ionic-button {
            --background: #3880ff;
            --color: white;
            --padding-top: 12px;
            --padding-bottom: 12px;
            --padding-start: 16px;
            --padding-end: 16px;
            --border-radius: 4px;
            display: inline-block;
            padding: var(--padding-top) var(--padding-end) var(--padding-bottom) var(--padding-start);
            background: var(--background);
            color: var(--color);
            border-radius: var(--border-radius);
            text-decoration: none;
            border: none;
            cursor: pointer;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 手动创建一个简单的 Ionic 应用界面 -->
        <div class="simple-app">
            <h1>📚 图书管理系统</h1>
            <p>HarmonyOS 版本</p>
            
            <div style="margin: 20px 0;">
                <button class="ionic-button" onclick="showMessage('首页')">首页</button>
                <button class="ionic-button" onclick="showMessage('图书')">图书管理</button>
                <button class="ionic-button" onclick="showMessage('借阅')">借阅管理</button>
                <button class="ionic-button" onclick="showMessage('我的')">我的</button>
            </div>
            
            <div id="content" style="margin-top: 30px; padding: 20px; background: #f5f5f5; border-radius: 8px;">
                <p>欢迎使用图书管理系统！</p>
                <p>这是一个在 HarmonyOS 上运行的 Ionic 应用。</p>
            </div>
        </div>
    </div>
    
    <div class="debug-info" id="debug">
        <div>🔄 简化应用模式</div>
    </div>
    
    <script>
        console.log('=== Simple Ionic App ===');
        
        const debug = document.getElementById('debug');
        let messages = [];
        
        function log(msg) {
            console.log(msg);
            messages.push(new Date().toLocaleTimeString() + ': ' + msg);
            debug.innerHTML = messages.slice(-3).map(m => '<div>' + m + '</div>').join('');
        }
        
        function showMessage(page) {
            const content = document.getElementById('content');
            content.innerHTML = `
                <h3>${page} 页面</h3>
                <p>这是 ${page} 的内容。</p>
                <p>点击时间: ${new Date().toLocaleTimeString()}</p>
            `;
            log(`✅ 切换到 ${page} 页面`);
        }
        
        log('✅ 简化应用已加载');
        log('🎯 绕过 Vue Router');
        log('📱 手动渲染界面');
        
        // 3秒后隐藏调试信息
        setTimeout(() => {
            debug.style.display = 'none';
        }, 3000);
        
        // 测试 Ionic 组件
        setTimeout(() => {
            try {
                // 尝试创建 Ionic 组件
                const ionButton = document.createElement('ion-button');
                ionButton.innerHTML = 'Ionic 组件测试';
                ionButton.style.margin = '10px';
                document.querySelector('.simple-app').appendChild(ionButton);
                log('✅ Ionic 组件可用');
            } catch (e) {
                log('⚠ Ionic 组件不可用');
            }
        }, 2000);
    </script>
    
    <!-- 仍然加载 Ionic 的 JavaScript，但不依赖 Vue 应用 -->
    <script defer="defer" src="./ionic/js/chunk-ionic-legacy.b2c76632.js" nomodule></script>
    <script defer="defer" src="./ionic/js/chunk-vendors-legacy.30a74f52.js" nomodule></script>
</body>
</html>